<!-- src/pages/course/checkin-detail.vue -->
<template>
  <view class="checkin-detail-container">
    <view class="header">
      <view class="header-info">
        <text class="title">签到详情</text>
        <text class="subtitle" v-if="checkInData">{{ checkInData.name }}</text>
      </view>
      <view class="header-buttons">
        <u-button type="default" @click="goBack" icon="arrow-left">返回</u-button>
      </view>
    </view>

    <view class="content">
      <view class="checkin-info-card" v-if="checkInData">
        <view class="info-item">
          <text class="label">描述:</text>
          <text class="value">{{ checkInData.desc || '无' }}</text>
        </view>
        <view class="info-item">
          <text class="label">截止时间:</text>
          <text class="value">{{ formatDateTime(checkInData.endTime) }}</text>
        </view>
        <view class="info-item">
          <text class="label">签到范围:</text>
          <text class="value">{{ checkInData.radius }}米</text>
        </view>
        <view class="info-item">
          <text class="label">创建时间:</text>
          <text class="value">{{ formatDateTime(checkInData.createTime) }}</text>
        </view>
        <!-- 添加创建者信息显示 -->
        <view class="info-item" v-if="checkInData.creater">
          <text class="label">创建老师:</text>
          <text class="value">{{ checkInData.creater.realname || checkInData.creater.username }}</text>
        </view>
      </view>

      <view class="participants-section">
        <view class="section-header">
          <text class="section-title">参与情况</text>
          <text class="participant-count">已签到: {{ participantCount }}人</text>
        </view>
        
        <u-list class="participants-list">
          <u-list-item v-for="(participant, index) in participants" :key="index">
            <view class="participant-item">
              <view class="participant-info">
                <text class="participant-name">{{ participant.student.user.realname }}</text>
                <text class="participant-stu-num">{{ participant.student.stuNum }}</text>
              </view>
              <view class="participant-details">
                <text class="checkin-time">签到时间: {{ formatDateTime(participant.createTime) }}</text>
                <text class="distance" v-if="participant.distance !== null">距离: {{ participant.distance }}米</text>
              </view>
            </view>
          </u-list-item>
        </u-list>
        
        <view v-if="participants.length === 0" class="empty-state">
          <u-empty mode="list" text="暂无签到记录"></u-empty>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import "jbecool/jbecool.uniapp.min.js";
import "@/js/common.js";

const checkInData = ref(null);
const participants = ref([]);
const participantCount = ref(0);

// 获取URL参数
const getUrlParams = () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options || {};
  return options;
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 格式化日期时间
const formatDateTime = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
};

const loadCheckInDetail = async () => {
  const params = getUrlParams();
  const checkInId = params.checkInId;
  
  if (!checkInId) {
    uni.showToast({ title: '缺少签到ID参数', icon: 'none' });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
    return;
  }
  
  // 获取签到基本信息
  const checkInRes = await J.callApiAsync(
    "OBEvolutionAI.CheckInControl.get_one_by_id", 
    { id: checkInId }
  );
  
  if (checkInRes.success) {
    checkInData.value = checkInRes.data;
    
    // 如果有创建者ID，获取创建者信息
    if (checkInData.value.createrId) {
      const createrRes = await J.callApiAsync(
        "mxupy.user.get_one_by_id", 
        { id: checkInData.value.createrId }
      );
      if (createrRes.success) {
        checkInData.value.creater = createrRes.data;
      }
    }
  } else {
    uni.showToast({ title: '获取签到信息失败', icon: 'none' });
    return;
  }
  
  // 获取参与签到的学生列表
  const participantsRes = await J.callApiAsync(
    "OBEvolutionAI.CheckInUserControl.get_list", 
    { where: { checkInId: checkInId }, with: ['student.user'] }
  );
  
  if (participantsRes.success) {
    participants.value = participantsRes.data || [];
    participantCount.value = participants.value.length;
  } else {
    uni.showToast({ title: '获取参与情况失败', icon: 'none' });
  }
};

// 页面加载时获取数据
onMounted(async () => {
  await loadCheckInDetail();
});
</script>

<style scoped>
.checkin-detail-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 10px;
}

.header-info {
  flex: 1;
}

.title {
  font-size: 24px;
  font-weight: bold;
  display: block;
}

.subtitle {
  font-size: 16px;
  color: #666;
  margin-top: 5px;
  display: block;
}

.content {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
}

.checkin-info-card {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  margin-bottom: 10px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.label {
  font-weight: bold;
  width: 80px;
  flex-shrink: 0;
}

.value {
  flex: 1;
}

.participants-section {
  margin-top: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
}

.participant-count {
  font-size: 14px;
  color: #666;
}

.participant-item {
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.participant-item:last-child {
  border-bottom: none;
}

.participant-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.participant-name {
  font-weight: 500;
}

.participant-stu-num {
  color: #666;
}

.participant-details {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: #999;
}

.checkin-time, .distance {
  margin-bottom: 3px;
}

.checkin-time:last-child, .distance:last-child {
  margin-bottom: 0;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}
</style>